<template>
  <!-- 通用页面  as22343.22 -->
  <article>
    <!-- 这个也是组件 路径在 './components/Search' -->
    <search-form
      v-if="formList.length"
      ref="searchForm"
      default-search-params
      :disabled="!!loading"
      :has-hours="hasHours"
      :show-time="showTime"
      :search-name="searchName"
      :reset-name="resetName"
      :has-default-time="hasDefaultTime"
      :prop-default-time="propDefaultTime"
      :form-list="formList"
      @hideSerach="hideSerach"
      @search="fetchItem"
      @cascaderFocus="cascaderFocus"
    />

    <section>
      <div style="padding: 6px 0" class="df aic">
        <div
          v-if="showSelectedNumber && rowSelectionEd"
          class="d-flex jcsb text-right fs12"
        >
          <div>
            已选中
            <span class="color-1989fa">{{ selectedRowKeys.length }}</span
            >条数据
            <a-button type="link" @click="clearSelect"> 取消选择 </a-button>
          </div>
          <div>
            <slot name="header" />
          </div>
        </div>
        <slot v-if="!showSelectedNumber" name="header" />
        <slot />
        <slot name="btns" />
      </div>
      <!-- template v-slot:header -->
      <a-layout style="background-color: #fff">
        <slot name="sidebar" />
        <a-layout-content>
          <a-tabs
            v-if="tabList.length"
            v-model="tabValue"
            :row-selection="rowSelection"
            @change="onTabChange"
          >
            <a-tab-pane
              v-for="tab in tabList"
              :key="tab.value"
              :tab="
                tab.label +
                ' (' +
                ('total' in tab ? tab.total : pagination.total) +
                ')'
              "
            >
              <a-table
                v-if="tab.value === tabValue"
                v-dragWidth="{
                  columns: columns,
                  id: dragId || tab.label + $route.name
                }"
                bordered
                size="small"
                :row-key="rowKey"
                :scroll="{ x, y: scrollY }"
                :columns="columns"
                :pagination="hasPage ? pagination : false"
                :data-source="tableData"
                :loading="loading"
                @change="handleTableChange"
              >
                <span
                  v-for="item in columns"
                  :key="item.key"
                  :slot="item.key"
                  slot-scope="text, record"
                  style="color: #606266"
                >
                  <template v-if="item.text">
                    <!-- 操作按钮设置 -->
                    <a
                      v-if="typeof item.text === 'string'"
                      :disabled="
                        item.setDisabled && item.setDisabled(record, item.text)
                      "
                      @click="doOperator(record, item.text, item.title)"
                      v-text="item.text"
                    />
                    <div v-else class="operator-btns">
                      <a
                        v-for="i in item.text"
                        :key="i"
                        :disabled="
                          item.setDisabled && item.setDisabled(record, i)
                        "
                        @click="doOperator(record, i, item.title)"
                        >{{ i }}</a
                      >
                    </div>
                  </template>
                  <span v-else-if="item.type === 'img'">
                    <img
                      v-if="typeof record[item.key] === 'string'"
                      v-view-img
                      loading="lazy"
                      class="table-img__comPage"
                      :src="record[item.key]"
                      alt
                    />
                    <img
                      v-for="(img__, iii) in record[item.key]"
                      v-else
                      :key="iii"
                      v-view-img
                      loading="lazy"
                      class="table-img__comPage"
                      :src="img__"
                      alt
                    />
                  </span>
                  <cpsToolTip
                    v-else
                    :text="item.statusOptions ? item.statusOptions[text] : text"
                  >
                    <span
                      :class="[
                        !item.event ? 'pointer-event' : 'pointer-cursor'
                      ]"
                      :style="{
                        color: item.setColor ? item.setColor(text) : ''
                      }"
                      @click.stop="doOperator(record, text, item.title)"
                      >{{
                        item.statusOptions ? item.statusOptions[text] : text
                      }}</span
                    >
                  </cpsToolTip>
                </span>
              </a-table>
            </a-tab-pane>
          </a-tabs>

          <!--  :loading="loading"-->
          <a-table
            ref="tableRef"
            v-else
            v-dragWidth="{ columns, id: dragId || 'a' + $route.name }"
            size="small"
            :row-key="rowKey"
            :scroll="{ x, y: scrollY }"
            :row-selection="rowSelection"
            :columns="columns"
            bordered
            :pagination="false"
            :data-source="tableData"
            :loading="loading"
            @change="handleTableChange1"
          >
            <div
              slot="filterDropdown"
              slot-scope="{
                setSelectedKeys,
                selectedKeys,
                confirm,
                clearFilters,
                column
              }"
              style="padding: 8px"
            >
              <a-input
                v-model.trim="filterSearchVal"
                :placeholder="`搜索${column.title}`"
                @change="() => filterChange(column)"
              />
              <a-row class="filter-box">
                <a-checkbox-group
                  :key="count"
                  :value="selectedKeys"
                  @change="e => setSelectedKeys(e)"
                >
                  <a-checkbox
                    v-for="check in column.filters"
                    :key="check.key"
                    :value="check.key"
                  >
                    {{ check.value }}
                  </a-checkbox>
                </a-checkbox-group>
              </a-row>

              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="
                  () => filterSearch(selectedKeys, confirm, column.dataIndex)
                "
              >
                搜索
              </a-button>
              <a-button
                size="small"
                style="width: 90px"
                @click="() => filterReset(clearFilters, column)"
              >
                重置
              </a-button>
            </div>

            <span
              :slot="item.slots.title"
              :key="item.key"
              v-for="item in customTitleColumns"
            >
              <slot :name="item.slots.title">
                {{ item.title }}
              </slot>
            </span>
            <span
              v-for="item in columns"
              :key="item.key"
              :slot="item.slotName || item.key"
              slot-scope="text, record"
              class="operator-btns"
            >
              <!-- 操作按钮处理 -->
              <template v-if="item.text">
                <a
                  v-if="typeof item.text === 'string'"
                  :disabled="
                    item.setDisabled && item.setDisabled(record, item.text)
                  "
                  @click="doOperator(record, item.text, item.title)"
                  v-text="item.text"
                />
                <template
                  v-else-if="typeof item.text === 'object' && item.btnroot"
                >
                  <a
                    v-for="i in item.text"
                    :key="i"
                    v-btnroot="item.btnroot"
                    :disabled="item.setDisabled && item.setDisabled(record, i)"
                    @click="doOperator(record, i, item.title)"
                    >{{ i }}</a
                  >
                </template>
                <template v-else>
                  <a
                    v-for="i in item.text"
                    :key="i"
                    :disabled="item.setDisabled && item.setDisabled(record, i)"
                    v-show="!(item.setFill && item.setFill(record, i))"
                    @click="doOperator(record, i, item.title)"
                  >
                    <!--               采购订单已审核设置紧急标签-->
                    {{
                      i === '设置紧急标签' &&
                      record.isEmergent &&
                      record.isEmergent === 1
                        ? '取消紧急标签'
                        : i
                    }}
                  </a>
                </template>
              </template>
              <!-- 图片处理 -->
              <span v-else-if="item.type === 'img'">
                <img
                  v-if="typeof record[item.key] === 'string'"
                  v-view-img
                  loading="lazy"
                  class="table-img__comPage"
                  :src="record[item.key]"
                  alt
                />
                <img
                  v-for="(img__, iii) in record[item.key]"
                  v-else
                  :key="iii"
                  v-view-img
                  class="table-img__comPage"
                  :src="img__"
                />
              </span>
              <span v-else-if="item.slotName">
                <slot :record="record" :name="item.scopedSlots.customRender" />
              </span>
              <!-- 未指定类型处理 -->
              <div v-else>
                <a-badge
                  v-if="badgeStatusList.includes(item.key) && record[item.key]"
                  status="success"
                />
                <cpsToolTip
                  :set-color="
                    item.setColor
                      ? item.setColor(text)
                      : () => {
                          return ''
                        }
                  "
                  :text="item.statusOptions ? item.statusOptions[text] : text"
                  @setEvent="
                    () => {
                      doOperator(record, text, item.title)
                    }
                  "
                >
                  <span
                    :class="[!item.event ? 'pointer-event' : 'pointer-cursor']"
                    :style="{ color: item.setColor ? item.setColor(text) : '' }"
                    @click="doOperator(record, text, item.title)"
                  >
                    {{
                      item.statusOptions ? item.statusOptions[text] : text
                    }}</span
                  >
                </cpsToolTip>
              </div>
            </span>
          </a-table>
          <div ref="slot">
            <div class="d-flex jcsb aic pl10 pr10 mt10 mb10">
              <div class="page-font">
                {{
                  `共${pagination.total}条数据，第${pagination.current}/${Math.ceil(
                    (pagination.total || 0) / pagination.pageSize
                  )}页`
                }}
              </div>
              <div>
                <a-pagination
                  v-model="pagination.current"
                  show-size-changer
                  show-quick-jumper
                  :default-current="1"
                  :page-size="pagination.pageSize"
                  :total="pagination.total"
                  :page-size-options="pagination.pageSizeOptions"
                  @showSizeChange="onChangePage"
                  @change="onChangePage"
                />
              </div>
            </div>
            <slot name="footer" />
          </div>
        </a-layout-content>
      </a-layout>
    </section>
  </article>
</template>

<script>
import API from './../../api/proof'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { mutationPageInfo } from './../../observable/setPageInfo'
import debounce from 'lodash.debounce'
import { observeDomResize } from 'utils/index.js'
const startTime = moment(Date.now() - 90 * 24 * 3600 * 1000).format(
  'YYYY-MM-DD 00:00:00'
)
const endTime = moment(Date.now()).format('YYYY-MM-DD 23:59:59')
export default {
  name: 'ColumnPage',
  props: {
    menuName: {
      type: String,
      default: ''
    },
    showSelectedNumber: {
      // 增加全选按钮已选中显示，兼容老数据
      type: Boolean,
      default: false
    },
    searchName: {
      type: String,
      default: ''
    },
    resetName: {
      type: String,
      default: ''
    },
    defaultSearchParams: {
      //  搜索栏可携带参数
      type: Boolean,
      default: false
    },
    clearDefault: {
      // 清除默认值
      type: Boolean,
      default: false
    },
    clearSelectRows: {
      // 默认多选可以选择下一页数据
      type: Boolean,
      default: false
    },
    hasHours: {
      // 时间选择器 时分秒
      type: Boolean,
      default: true
    },
    autoLoad: {
      // 时间选择器 时分秒
      type: Boolean,
      default: true
    },
    dragId: {
      type: [String, Number],
      default: ''
    },
    showTime: {
      type: Boolean,
      default: true
    },
    hasDefaultTime: {
      // 是否展示默认时间
      type: Boolean,
      default: true
    },
    tabKey: {
      type: String,
      default: 'priceSheetType'
    },
    propDefaultTime: {
      // 默认时间
      type: Array,
      default: () => [startTime, endTime]
    },
    fn: {
      // 对返回数据做处理的方法
      type: [Boolean, Function],
      default: false
    },
    disabled: {
      // 设置复选按钮禁止点击
      type: [Boolean, Function],
      default: false
    },
    sortFn: {
      // 排序功能
      type: [Boolean, Function],
      default: false
    },
    x: {
      type: String,
      default: '100%'
    },
    y: {
      type: [String, Number],
      default: 780
    },
    sy: {
      type: [String, Number],
      default: 600
    },
    checkbox: {
      type: String,
      default: 'checkbox'
    },
    fixedLeft: {
      // 复选框固定
      type: Boolean,
      default: true
    },
    tabList: {
      type: Array,
      default: () => []
    },
    formList: {
      type: Array,
      default: () => []
    },
    hasPage: {
      // 是否有分页
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    url: {
      type: String,
      default: ''
    },
    defaultParams: {
      // 默认参数
      type: Object,
      default: () => {
        return {}
      }
    },
    rowKey: {
      type: [String, Function, Number],
      default: 'id'
    },
    rowSelectionEd: {
      type: Boolean,
      default: false
    },
    rowSelectionPage: {
      type: Boolean,
      default: false
    },
    propsRight: {
      // 右对齐的值
      type: Array,
      default: () => []
    },
    selectRowKeys: {
      type: Array,
      default: () => []
    },
    propsBadgeStatusList: {
      // 右对齐的值
      type: Array,
      default: () => []
    },
    // 表格高度是否自动计算
    isCalcTableHeight: {
      type: Boolean,
      default: false
    },
    // 搜索前校验
    beforeSearchValid: {
      type: Function,
      default: null
    }
  },
  data() {
    this.filterChange = debounce(this.filterChange, 500)
    return {
      badgeStatusList: ['status', 'state', 'statuStr', 'stateStr', 'statusStr'],
      dataObj: {}, // 选中的
      sort: {}, // 排序参数 通过sortFn自定义
      selectedRowKeys: this.selectRowKeys,
      selectedRows: [],
      loading: false,
      tabValue: '',
      pagination: {
        showSizeChanger: true,
        pageSizeOptions: ['25', '50', '100'],
        current: 1,
        pageSize: 25,
        total: 0
      },
      alignRight: ['planNum', 'salePriceShow', 'purchasePriceShow'],
      queryInfo: {},
      tableData: [],
      searchInfo: {},
      filterSearchVal: '',
      count: 0,
      filterParams: {},
      scrollY: 600
    }
  },
  computed: {
    // scrollY () {
    //   const mql = window.matchMedia('(max-width: 1400px)')
    //   if (mql.matches) {
    //     return this.sy || 700
    //   }
    //   return this.y
    // },
    customTitleColumns() {
      return this.columns.filter(s => s.slots)
    },
    rowSelection() {
      const { fixedLeft } = this
      return this.rowSelectionEd
        ? {
            type: this.checkbox,
            fixed: fixedLeft,
            getCheckboxProps: record => ({
              props: {
                // 全部默认禁止选中
                // disabled: true,
                // 某几项默认禁止选中(R: 当state等于1时)
                disabled: this.disabled ? this.disabled(record) : false
                // 某几项默认选中(R: 当state等于1时)
                // defaultChecked: record.state == 1,
              }
            }),
            selectedRowKeys: this.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              // selectrows 为当前选中的数据，不包含分页
              console.log(this.dataObj, selectedRowKeys)

              this.selectedRowKeys = selectedRowKeys
              this.selectedRows = []
              selectedRowKeys.forEach(_ => {
                this.selectedRows.push(this.dataObj[_])
              })
              this.$emit(
                'setSelectedRows',
                this.selectedRowKeys,
                this.selectedRows
              )
            }
          }
        : null
    }
  },
  watch: {
    selectRowKeys(val) {
      this.selectedRowKeys = val
    },
    isCalcTableHeight: {
      handler(val) {
        const self = this
        val &&
          this.$nextTick(() => {
            self.observeTableHeight()
          })
      },
      immediate: true
    }
  },
  created() {
    this.badgeStatusList.push(...this.propsBadgeStatusList)
    this.setColumns()
    this.setPageInfo()
    this.tabList.length && (this.tabValue = this.tabList[0].value)
  },
  mounted() {
    console.log(this)
    if (this.autoLoad) {
      if (!this.defaultSearchParams) {
        this.loadData()
      } else {
        this.$refs.searchForm.search()
      }
    }
    window.onresize = () => {
      this.observeTableHeight()
    }
  },
  methods: {
    observeTableHeight() {
      const self = this
      const boxHeight = document.body.offsetHeight
      const tableTargetNode = this.$refs.tableRef.$el
      const node = this.formList.length
        ? this.$refs.searchForm.$el
        : tableTargetNode
      this.isCalcTableHeight &&
        observeDomResize(node, () => {
          const { top } = tableTargetNode.getBoundingClientRect()
          self.scrollY = boxHeight - top - 130
        })
    },
    clearSelect() {
      this.selectedRowKeys = []
      this.selectedRows = []
      this.$emit('setSelectedRows', this.selectedRowKeys, this.selectedRows)
    },
    search(flag) {
      this.$refs.searchForm.search(flag)
    },
    searchWithParams(params) {
      this.$refs.searchForm.searchWithParams(params)
    },
    onChangePage(cur, size) {
      console.log(cur, size)
      this.pagination.current = cur
      this.pagination.pageSize = size
      this.loadData()
    },
    hideSerach() {
      // this.watchTableSizeByResize()
    },
    setParams(obj = {}) {
      const params = {}
      this.$refs.searchForm.setParams(params)
      Object.assign(obj, params)
      this.$emit('getParams', params)
    },
    setPageInfo() {
      // 用于页面到详情页等再次进来回到当前分页状态
      if (mutationPageInfo.getInfo(this.$route.name)) {
        Object.assign(
          this.pagination,
          mutationPageInfo.getInfo(this.$route.name)
        )
      } else {
        const { current, pageSize } = this.pagination
        mutationPageInfo.setInfo({ current, pageSize }, this.$route.name)
      }
    },
    setColumns() {
      const right = [...this.alignRight, ...this.propsRight]
      const menuName = this.menuName
      const centerList = ['imageUrl', 'img']
      this.columns.forEach(_ => {
        if (_.filters) {
          _.params = { columnName: _.columnField || _.title, menuName }
          _.scopedSlots = { filterDropdown: 'filterDropdown' }
          _.onFilterDropdownVisibleChange = visible => {
            this.filterSearchVal = ''
            if (visible) {
              _.params.queryStr = null
              this.fetchFilterData(_)
            }
          }
        }
        _.scopedSlots = { ..._.scopedSlots, customRender: _.slotName || _.key }
        _.dataIndex = _.key
        _.title = (window.localStorage.lang === 'en-GB' && _.enTitle) || _.title
        _.text && (_.fixed = 'right')
        _.align = right.includes(_.key) ? 'right' : 'left'
        centerList.includes(_.type) && (_.align = 'center')
        ;(typeof _.text === 'string' ||
          (typeof _.text === 'object' && _.text.length === 1)) &&
          (_.align = 'center')
      })
    },
    // filterChange (e, setSelectedKeys, record) {
    //   const value = e.target.value ? [e.target.value] : []
    //   setSelectedKeys(value)
    //   const { params } = record
    //   this.$set(params, 'queryStr', value.join())
    //   this.fetchFilterData(record)
    // },
    filterChange(record) {
      const { params } = record

      this.$set(params, 'queryStr', this.filterSearchVal)

      this.fetchFilterData(record)
    },
    async fetchFilterData(record) {
      const { params } = record
      const result = await API.fetchData('/config/list-column', params)
      this.count++
      this.$set(record, 'filters', result)
    },
    filterSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.$set(this.filterParams, dataIndex + 's', selectedKeys)
      this.loadData()
    },
    filterReset(clearFilters, record) {
      clearFilters()
      this.$delete(this.filterParams, record.dataIndex + 's')
      this.loadData()
    },
    cascaderFocus(name) {
      // console.log(name, '111111111')
      this.$emit('cascaderFocus', name)
    },
    async fetchItem(item, clearPage = false) {
      console.log('need save ', item)
      if (this.beforeSearchValid) {
        const isValid = this.beforeSearchValid(item)
        if (!isValid) {
          return false
        }
      }
      if (!item.needSave) {
        this.$emit('filterSearch', item)
      }

      if (this.clearDefault) {
        // 清除默认值
        this.defaultParams = {}
      }
      this.queryInfo = item
      if (clearPage) {
        await this.$emit('reset')
        this.pagination = {
          showSizeChanger: true,
          pageSizeOptions: ['25', '50', '100'],
          current: 1,
          pageSize: 25,
          total: 0
        }
      }
      this.loadData()
    },
    reset() {
      this.$refs.searchForm.reset()
    },
    async loadData() {
      try {
        if (!this.url) {
          throw new Error('请求URL不能为空')
        }
        if (this.clearSelectRows) {
          // 清空多选
          this.selectedRowKeys = []
          this.selectedRows = []
          this.$emit('setSelectedRows', this.selectedRowKeys, this.selectedRows)
          // const time1 = Date.now()
        }
        const { current: pageNum, pageSize } = this.pagination
        const obj = {
          ...this.defaultParams,
          ...this.queryInfo,
          ...this.sort,
          ...this.filterParams
        }
        this.$emit('getParams', obj)
        this.searchInfo = obj
        if (this.hasPage) {
          Object.assign(obj, { pageNum, pageSize })
        }
        if (this.tabList.length) {
          obj[this.tabKey] = this.tabValue
        }
        this.loading = { spinning: true, tip: 'loading...' }

        // 你所要执行的 javascript程序 ....
        const time = Date.now()
        const result = await API.fetchData(this.url, obj)
        this.$emit('getTotal', result?.total || 0)
        if (!result && this.pagination.current > 1) {
          this.pagination.current = 1
          this.loadData()
        }
        this.sort = {} // 清空排序

        if (Date.now() - time < 120) {
          // loading
          console.log(Date.now())
          setTimeout(() => {
            this.loading = false
          }, 100)
        } else {
          this.loading = false
        }

        this.tableData = result ? result.list || [] : []
        this.tableData.forEach(_ => {
          if (_.ossUrl) {
            if (!_.ossUrl.startsWith('https')) {
              _.ossUrl = _.ossUrl.replace('http', 'https')
            }
          }
        })
        this.pagination.total = result ? result.total || 0 : 0
        setTimeout(() => {
          this.tabList.length &&
            this.tabList.forEach(_ => {
              _.value === this.tabValue && (_.total = this.pagination.total)
            })
        }, 18)
        /**
         * 在分页数非1 的情况下请求不到数据。默认返回到第一页请求
         * 防止分页查不到数据BUG
         */
        if (
          this.pagination.current > 1 &&
          result &&
          result.list &&
          result.list.length === 0
        ) {
          this.pagination.current = 1
          this.loadData()
          const { current, pageSize } = this.pagination
          mutationPageInfo.setInfo({ current, pageSize }, this.$route.name)
        }

        this.tabValue && this.$emit('onTabChange', this.tabValue)
        this.fn && this.fn(this.tableData)
        this.rowSelectionEd && this.setDataObj()
      } catch (error) {
        this.loading = false
      }
    },
    setDataObj() {
      // 设置数据 用于多选
      const key = this.rowKey

      if (typeof this.rowKey === 'function') {
        this.tableData &&
          this.tableData.forEach(_ => {
            this.dataObj[key(_)] = _
          })
      } else {
      }
      this.tableData &&
        this.tableData.forEach(_ => {
          this.dataObj[_[key]] = _
        })
    },
    // tabs 专用
    handleTableChange(v, filters, sorter) {
      // 分页 排序   排序规则 sortFn自定义
      console.log(v, filters, sorter)
      if (!sorter.order) {
        this.sort = {}
      }
      sorter.order && this.sortFn && this.sortFn(sorter, this.sort)
      this.pagination.current = v.current
      this.pagination.pageSize = v.pageSize
      const { current, pageSize } = this.pagination
      mutationPageInfo.setInfo({ current, pageSize }, this.$route.name)
      this.setPageInfo()
      this.$refs.searchForm.search()
    },
    handleTableChange1(v, filters, sorter) {
      this.$emit('onchange', sorter)
    },
    doOperator(record, text, title) {
      console.log(record, text, title)
      this.$emit('operator', record, text, title)
    },
    onTabChange(v) {
      this.tabValue = v
      this.$emit('onTabChange', v)
      setTimeout(() => {
        this.setColumns()
        this.setPageInfo()
      }, 19)
      this.loadData()
    }
  }
}
</script>
<style scoped lang="less">
.page-font {
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}
article {
  padding: 10px;
  background: #fff;
}
.pointer-event {
  pointer-events: none;
}
.pointer-cursor {
  cursor: pointer;
}
.load-cps {
  z-index: 9999;
  position: absolute;
  background: #999;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  & > p {
    position: absolute;
    top: 50%;
    right: 50%;
    color: #1989fa;
    transform: translate(-50%, -50%);
  }
}
.table-img__comPage {
  max-width: 100px;
  max-height: 37px;
  margin-right: 8px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 3px;
  transition: all 1s;
  transform: scale(2);
}
/deep/.ant-table-small.ant-table-bordered .ant-table-fixed-right {
  border-right: none;
  border-left: none;
}

/deep/ .ant-table-middle.ant-table-bordered .ant-table-fixed-right table {
  border-right: none;
  border-left: none;
}
.operator-btns a {
  display: inline-block;
  margin: 3px 0;
  margin-right: 8px;
  &:last-child {
    margin-right: 0;
  }
}
.filter-box {
  max-height: 200px;
  margin: 10px 0;
  padding-right: 8px;
  overflow: auto;
  .ant-checkbox-wrapper {
    display: block;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
  &::-webkit-scrollbar {
    width: 5px;
  }
}
</style>
